<template>

  <div id="he-plugin-standard" style="height: 150px;  background-color: white">

  </div>

</template>

<script>

  import http from '@/utils/http'

  export default {
    name: "Wetter",
    data(){
      return {
        // 查询城市代码
        cityCode: '',
      }
    },
    methods: {
      /**
       * 获取天气
       */
      getWeather(){
        http.get("/home/getWeather", {
        }).then(response => {
          let res = response.data;
          if (res.status === 'error'){
            // 401是token过期跳转的
            if (res.code !== 401){
              this.$message.error(res.msg);
            }
            return
          }
          this.cityCode = res.data;
          this.getBreezyWeather()

        }).catch(error => {
          this.$message.error(error.message);
        })
      },
      /**
       * 和风天气
       */
      getBreezyWeather(){
        // 和风天气的参考文档 https://widget.qweather.com/create-standard
        // 参考文档：https://blog.csdn.net/qq_57386322/article/details/127935459
        window.WIDGET = {
          "CONFIG": {
            "layout": "1",
            // "width": "450",
            "height": "150",
            "background": "1",
            "dataColor": "FFFFFF",
            "city": "CN" + this.cityCode,
            "key": "77f6f636d00c4ec8bc4ba844316ee3b0"
          }
        };
        (function (d) {
          let c = d.createElement('link')
          c.rel = 'stylesheet'
          c.href = 'https://widget.qweather.net/standard/static/css/he-standard.css?v=2.0'
          let s = d.createElement('script')
          s.src = 'https://widget.qweather.net/standard/static/js/he-standard-common.js?v=2.0"'
          let sn = d.getElementsByTagName('script')[0]
          sn.parentNode.insertBefore(c, sn)
          sn.parentNode.insertBefore(s, sn)
          s.onload=()=>{
            //自动宽度
            setTimeout(() => {
              document.getElementById("he-plugin-standard").style.width  = "100%";
            }, 100);
          }
        })(document)
      },
    },
    mounted(){
      // 旧的接口因为无法使用已经丢弃
      this.getWeather()
    },
    created(){

    }
  }
</script>

<style scoped>



</style>
